<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="/css/index.css"/>
		<link rel="stylesheet" type="text/css" href="/css/detail.css"/>
		<link rel="stylesheet" type="text/css" href="/css/iconfont.css"/>
		<script src="/lib/requirejs/require.js" data-main="/js/detail"></script>
		<title></title>
		<style type="text/css">
			#gal1{
				text-align: center;
				margin-top: 10px;
			}
			.active {
				display: inline-block;
			}
			.active img {
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<!--网页头部-->
		<header></header>
		<!--网页详情-->
		<article id="docDetail">
			<div class="detail">
				<div class="titles">
					<p>户外装备>户外箱包>户外背包配件>OSPREY>OSPREY超轻拉链整理袋</p>
				</div>
				<!--详情页面-->
				<div class="content">
			<!--左侧-->
				<!--放大镜-->
				<!--<div class="left">
					
				</div>	-->
				<!--放大镜-->
			<!--右侧/详情-->
				<!--<div class="right">
						
				</div>-->
				</div>
			</div>
		</article>
		
		<!--网页尾部-->
		<footer></footer>
		
		<!--渲染数据-->
		<script type="text/html" id="detail_template">
			<!--放大镜-->
			<div class="left">
				<!--显示中图-->
				<img src="{{img[0].middle}}" data-zoom-image="{{img[0].big}}" alt="" class="middle-zoom"/>
				<!--显示小图-->
				<div id="gal1">
					{{each img curr}}
					<a href="#" data-image="{{curr.middle}}" data-zoom-image="{{curr.big}}">
						<img src="{{curr.small}}" alt=""/>
					</a>
					{{/each}}
				</div>
				<div class="clearfix"></div>
			</div>
			<!--右侧-->
			<div class="right">
						<!--id-->
						<div class="info_id prod_id">{{id}}</div>
						<!--标题-->
						<div class="title">
							<div class="guoji">
								<p>
									<img src="../images/1077833f.png"/>
									<span>美国</span>
									<span>|</span>
									<span>OSPREY</span>
								</p>
								<i>
									<span>易</span>
									<span>自营</span>
								</i>
							</div>
							<h3 class="prod_title">{{title}}</h3>
						</div>
						<!--价格-->
						<div class="price">
							<div class="m-price">
								<span>售价</span>
								<span>
									￥
									<span class="prod_price">{{price}}.00</span>
								</span>
								<span>
									参考价&nbsp;&nbsp;￥<span class="prod_oriprice">{{oriprice}}.00</span>
								</span>
							</div>
							<div class="msg">
								<img src="../images/96zhe.png"/>
								<span>会员下单96折，预计3.16元</span>
								<a href="#">开通会员</a>
							</div>
						</div>
						<!--运费-->
						<div class="freight">
							<span>运费</span>
							<span>
								至
								<span>四川/成都/青羊区</span>
							</span>
							<span>满88包邮</span>
						</div>
						<!--服务-->
						<div class="service">
							<span>服务</span>
							<span>本商品由 自营国内仓 发货</span>
							<span>24:00前完成支付，预计10月20日（周六）送达</span>
						</div>
						<!--尺码-->
						<div class="size">
							<span>尺码</span>
							<ul>
								<li>s</li>
								<li>m</li>
								<li>l</li>
							</ul>
						</div>
						<!--颜色-->
						<div class="color">
							<span>颜色</span>
							<ul>
								<li><img src="../images/1cpekrtsb0_800_800.jpg"/></li>
								<li><img src="../images/1cpekrtsb0_800_800.jpg"/></li>
								<li><img src="../images/1cpekrtsb0_800_800.jpg"/></li>
								<li><img src="../images/1cpekrtsb0_800_800.jpg"/></li>
							</ul>
						</div>
						<!--数量-->
						<div class="info_count">
							<span>数量</span>
							<div class="count">
								<span class="decrement">-</span>
								<input type="text" value="1" class="amount"/>
								<span class="increment">+</span>
							</div>
							<span>库存充足</span>
						</div>
						<!--说明-->
						<div class="explain">
							<span>说明</span>
							<ul>
								<li>
									<img src="../images/gougou.gif"/>
									<a href="#">会员96折</a>
								</li>
								<li>
									<img src="../images/gougou.gif"/>
									正品保障
								</li>
								<li>
									<img src="../images/gougou.gif"/>
									支持30天无忧退货
								</li>
							</ul>
						</div>
						<!--购买-->
						<div class="purchase">
							<a href="/html/close.html" class="suddenly">立即购买</a>
							<a href="#" class="btn-buy">
								<i class="iconfont icon-icon4"></i>
								加入购物车
							</a>
						</div>
					</div>
				<!--线条-->
				<div class="xiantiao"></div>
				<!--详情-->
					<div class="bottom">
						<div class="toogle">
							<h3>产品信息</h3>
							<p>{{desc}}</p>
						</div>
						<div class="toogle">
							<h3>产品特点</h3>
							<p>{{details}}</p>
						</div>
						<div class="toogle">
							<h3>更多</h3>
							<p>{{more}}</p>
						</div>
					</div>
		</script>
		
		
		<!--<link rel="stylesheet" type="text/css" href="/css/flexslider.css"/>-->
		
	</body>
</html>
